<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="/js/auth.js"></script>
</head>
<body style="background-color: #f5f5f5">
    <div id="app" style="background-color: white;width: 1000px;height: 650px;text-align: center;margin: auto;">
        <div style="margin: 10px;background-color: #bd2130">
            <span style="color: #00F7DE;font-size:30px ">学习进度</span>
        </div>
        <div>
        <table class="table table-striped">
            <thead>
            <tr>
                <td>账户id</td>
                <td>课程名称</td>
                <td>学习时长</td>
                <td>学习进度</td>
                <td>是否完成</td>
                <td>当前进度</td>
            </tr>

            </thead>
            <tbody>
            <tr v-for="schedule in schedules">
                <td>{{schedule.uid}}</td>
                <td>{{schedule.lesson}}</td>
                <td>{{schedule.studytime}}</td>
                <td>{{schedule.schedule}}</td>
                <td v-if="schedule.status==1">已完成课程</td>
                <td v-else-if="schedule.status==0">未完成</td>
                <td>{{schedule.current}}</td>
            </tr>

            </tbody>
        </table>
        </div>
        <div>
            <button @click="prevPage()">上一页</button>
            <span>第{{currentPage}}页/共{{totalPage}}页</span>
            <button @click="nextPage()">下一页</button>
        </div>
    </div>
    <script type="text/javascript">
        let p={headers}
        new Vue({
            el:"#app",
            data:{
                schedules:[],
                uid:1,
                pp:"1",
                currentPage:"",
                totalPage:""
            },
            mounted(){
                axios.post(
                    "/profile/schedule/findschedule",
                    {
                     "uid":this.uid,
                     "p":this.pp
                    },p
                ).then(res=>{
                    console.info(res.data.data)
                    this.schedules=res.data.data.data;
                    this.currentPage=res.data.data.page;
                    this.totalPage=res.data.data.totalPage;
                })
            },
            methods:{
                //上一页
                prevPage:function() {
                    //console.log(this.currentPage);
                    if (this.currentPage = 1) return;

                    this.currentPage--;
                    console.info(this.currentPage);
                    /*var params=new URLSearchParams();
                    params.append("p",this.currentPage);*/
                    axios.post(
                        "/profile/schedule/findschedule",
                        {
                            "uid":this.uid,
                            "p":this.currentPage
                        },p
                    ).then(res=>{ //res返回的结果 res=> 得到的结果执行这里面的操作
                        this.schedules=res.data.data.data;
                        this.currentPage=res.data.data.page;
                        this.totalPage=res.data.data.totalPage;
                        this.pageSize=res.data.data.pageSize;
                    });

                },
                // 下一页
                nextPage:function() {
                    if (this.currentPage == this.totalPage)return ;

                    this.currentPage++;
                    console.info(this.currentPage);
                    /*var params=new URLSearchParams();
                    params.append("p",this.currentPage);*/
                    axios.post(
                        "/profile/schedule/findschedule",
                        {
                            "uid":this.uid,
                            "p":this.currentPage
                        },p
                    ).then(res=>{ //res返回的结果 res=> 得到的结果执行这里面的操作
                        this.schedules=res.data.data.data;
                        this.currentPage=res.data.data.page;
                        this.totalPage=res.data.data.totalPage;
                        this.pageSize=res.data.data.pageSize;
                    });
                }
            }
        });
    </script>
</body>
</html>